<template>
  <div class="main">
    <div class="air-quality">
      <div class="air-quality__header">空气质量监测</div>
      <div class="air-quality__content row full-height-pm25 padding-full">
        <div ref="left" class="col-12 full-height">
          <div class="row third">
            <div class="col-14 full-height">
              <district-left></district-left>
            </div>
            <div class="col-10 full-height padding-left-x">
              <district-right></district-right>
            </div>
          </div>
          <div class="row third">
            <temperature></temperature>
          </div>
          <div class="row third">
            <humidity></humidity>
          </div>
        </div>
        <div ref="left" class="col-12 full-height">
          <div class="row third">
            <div class="col-8 full-height padding-right-x">
              <district-pm></district-pm>
            </div>
            <div class="col-16 full-height padding-left-x">
              <district-history></district-history>
            </div>
          </div>
          <div class="row third">
            <div class="col-8 full-height padding-right-x">
              <districtTvoc></districtTvoc>
            </div>
            <div class="col-16 full-height padding-left-x">
              <tvoc-history></tvoc-history>
            </div>
          </div>
          <div class="row third">
            <div class="col-8 full-height padding-right-x">
              <districtFormaldehyde></districtFormaldehyde>
            </div>
            <div class="col-16 full-height padding-left-x">
              <formaldehyde-histyory></formaldehyde-histyory>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import temperature from './components/temperature'
import humidity from './components/humidity'
import districtLeft from './components/districtLeft'
import districtRight from './components/districtRight'
import districtPm from './components/districtPm'
import districtTvoc from './components/districtTvoc'
import districtFormaldehyde from './components/districtFormaldehyde'
import tvocHistory from './components/tvocHistory'
import districtHistory from './components/districtHistory'
import formaldehydeHistyory from './components/formaldehydeHistyory'
// import pm from './components/PM'
// import AirQuality from './components/air-quality'
// import WaterWatch from './components/water-watch'
// import ElectricalWatch from './components/electrical-watch'
// import DoorControl from './components/door-control'

export default {
  name: 'PM25',

  components: {
    temperature,
    humidity,
    districtLeft,
    districtRight,
    districtPm,
    districtTvoc,
    districtFormaldehyde,
    tvocHistory,
    districtHistory,
    formaldehydeHistyory
  },

  data () {
    return {}
  },

  mounted () {
    let _self = this
    this.requestRestfulData()
    // if (!window.localStorage.getItem('pm')) {
    _self.$store.dispatch('updatePublicPM25')
    // }
    // setInterval(function () {
    //   _self.$store.dispatch('updatePublicPM25')
    // }, 1000 * 60 * 20)
  },

  methods: {
    /**
     * 处理栅格大小调整
     * @param {String} i 索引
     * @param {Number} newH 调整后的高度
     * @param {Number} newW 调整后的宽度
     */
    onResize (i, newH, newW) {
      console.log('Resize')
    },
    requestRestfulData () {
      this.$store.dispatch('updateHistoryTemperatureHumidity')
      this.$store.dispatch('updateHistoryTvocPM25Formaldehyde', 1)
      this.$store.dispatch('updateHistoryTvocPM25Formaldehyde', 7)
      this.$store.dispatch('updateHistoryTvocPM25Formaldehyde', 30)
      this.$store.dispatch('updateNowdayTvocPM25Formaldehyde')
      // this.$store.dispatch('updatePublicPM25')
    }
  }
}
</script>

<style lang="stylus">
@import '../../../assets/stylus/base'

.air-quality {
  absolute: left top;
  left: 0;
  size: 100%;
  padding-top: 52px;
  min-width: 800px;
  box-sizing: border-box;

  // padding: 52px 400px 40px 0;
  // font-size: 0;
  // color: #fff;
  box-sizing border-box
  .air-quality__header {
    font-size: 24px;
    font-weight: 200;
    line-height: 24px;
    padding: 20px 0 10px 20px;
    box-sizing border-box
  }
  .air-quality__content {
    absolute: left 0 top 0;
    width: 100%;
    height: 100%;
    padding-top: 106px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .third {
    padding: 5px;
    box-sizing: border-box;
    height: 33.33%
  }
}

.full-height-pm25 {
  height: 100%
}
.padding-left-x {
  padding-left 5px;
  box-sizing: border-box;
}
.padding-right-x {
  box-sizing: border-box;
  padding-right 5px;
}
.padding-top-x {
  padding-top 5px;
  box-sizing: border-box;
}
.padding-bottom-x {
  box-sizing: border-box;
  padding-bottom 5px;
}
.second {
  height: 50%
}
.padding-full {
  padding: 5px;
  box-sizing: border-box;
}
</style>
